import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import Titles from "@/components/Titles";
import city from "@/enums/city";
import { Button, Cascader, Col, DatePicker, Form, Input, message, Row, Select } from "antd";
import { useEffect, useState } from "react";
import { useTabsContext } from "@/contexts/TabsContext";
import { addPeoList } from "@/api/modules/people";
import { userList } from "@/api/modules/user";
import moment from "moment";

const shopCar = () => {
	const [formVal, setFormVal] = useState<any>({});
	const [userLen, setUserLen] = useState<number>(1);
	const [userLists, setUserList] = useState<any>([]);
	console.log(formVal);
	const { delTabs } = useTabsContext();
	console.log(delTabs);
	const [from] = Form.useForm();
	const onFinish = async (values: any) => {
		setFormVal(values);
		let citys = "";
		values?.address.forEach((item: any) => {
			item && (citys += item + " ");
		});
		const city = values?.address ? citys : "";

		const grouped: any = {};
		for (const key in values) {
			if (key.includes("user") || key.includes("type")) {
				const suffix = key.slice(-1);
				if (!grouped[suffix]) {
					grouped[suffix] = {};
				}
				grouped[suffix][key.includes("user") ? "id" : "relation"] = values[key];
			}
		}

		const result = Object.values(grouped);
		const reqQuery = {
			...values,
			birthday: moment(values.birthday).format("YYYY-MM-DD"),
			address: city,
			userInfoDTOList: result
		};
		await addPeoList({ ...reqQuery });
		message.success("添加成功");
		delTabs("/staff/add");
	};

	const getUserList = async () => {
		const { data } = await userList({});
		setUserList(
			data?.data.map((item: any) => {
				return {
					label: item.name,
					value: item.id
				};
			})
		);
	};

	const goBack = () => {
		delTabs("/staff/add");
	};

	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	const submit = () => {
		from.submit();
	};

	useEffect(() => {
		getUserList();
	}, []);

	return (
		<LayoutWhite>
			<Title word={"新增就诊人员"} more={moreButton()} />
			<Form
				name="basic"
				form={from}
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 8 }}
				style={{ width: "100%", padding: "20px 0px" }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				onFinishFailed={() => message.info("请输入必填项")}
				autoComplete="off"
			>
				<Titles title={"基本信息"} />
				<Form.Item label="人员编码" name="code" rules={[{ required: true, message: "请输入人员编码" }]}>
					<Input placeholder="请输入人员编码" />
				</Form.Item>

				<Form.Item label="人员名称" name="name" rules={[{ required: true, message: "请输入人员名称" }]}>
					<Input placeholder="请输入人员名称" />
				</Form.Item>

				<Form.Item label="人员性别" name="gender" rules={[{ required: true, message: "请选择用户性别" }]}>
					<Select
						placeholder="请选择人员性别"
						options={[
							{
								value: "0",
								label: "男"
							},
							{
								value: "1",
								label: "女"
							}
						]}
					></Select>
				</Form.Item>

				<Form.Item label="人员年龄" name="age" rules={[{ required: true, message: "请输入人员年龄" }]}>
					<Input placeholder="请输入人员年龄" />
				</Form.Item>

				<Form.Item label="人员生日" name="birthday" rules={[{ required: true, message: "请选择人员生日" }]}>
					<DatePicker placeholder="请选择人员生日" allowClear format="YYYY-MM-DD" />
				</Form.Item>

				<Form.Item label="联系方式" name="telephone" rules={[{ required: true, message: "请输入联系方式" }]}>
					<Input placeholder="请输入联系方式" />
				</Form.Item>

				<Form.Item label="医保类型" name="name">
					<Select
						placeholder="请选择医保类型"
						options={[
							{
								value: "0",
								label: "类型一"
							},
							{
								value: "1",
								label: "类型二"
							}
						]}
					></Select>
				</Form.Item>

				<Form.Item label="相关科室" name="departmentName" rules={[{ required: true, message: "请输入相关科室" }]}>
					<Input placeholder="请输入相关科室" />
				</Form.Item>

				<Form.Item label="位置信息" name="address">
					<Cascader options={city} placeholder="请选择位置" />
				</Form.Item>
				<Form.Item label="详细地址" name="description">
					<Input.TextArea placeholder="请输入详细地址" style={{ height: "80px" }} />
				</Form.Item>

				<Titles title={"关联用户"} />
				{new Array(userLen).fill("").map((_: any, ind: number, arr: any) => {
					return (
						<Row key={ind} gutter={18}>
							<Col span={6}></Col>
							<Col span={6}>
								<Form.Item wrapperCol={6} label={`用户${ind + 1}`} name={`user${ind + 1}`}>
									<Select allowClear placeholder="请选择用户" options={userLists}></Select>
								</Form.Item>
							</Col>
							<Col span={4}>
								<Form.Item wrapperCol={4} label={``} name={`type${ind + 1}`}>
									<Select
										allowClear
										placeholder="请选择用户关系"
										options={[
											{
												value: "0",
												label: "父子"
											},
											{
												value: "1",
												label: "母子"
											}
										]}
									></Select>
								</Form.Item>
							</Col>
							{ind !== arr.length - 1 && <Button onClick={() => setUserLen(userLen - 1)}>删除本行</Button>}
							{ind === arr.length - 1 && <Button onClick={() => setUserLen(userLen + 1)}>新增一行</Button>}
						</Row>
					);
				})}
			</Form>
			<Title word={""} more={moreButton()} />
			<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
				<Button style={{ marginRight: "30px" }} onClick={() => goBack()}>
					返回
				</Button>
				<Button type="primary" onClick={() => submit()}>
					确认保存
				</Button>
			</div>
		</LayoutWhite>
	);
};

export default shopCar;
